<template>
    <div class="nav-aside">
        <div class="logo" @click="goHome">
            <span>起重机智能安全保障平台</span>
        </div>
        <el-menu class="menus" :default-active="defaultActive" ref="menusRef" @open="menuOpen">
            <template v-for="item in store.menu">
                <template v-if="item.child.length !== 0">
                    <el-sub-menu :index="item.id.toString()" @click="goPath(item)">
                        <template #title>
                            <i class="iconfont icon" :class="item.icon" :style="{ color: item.name === store.navData[0]?.name ? '#4BA6DD' : '' }"></i>
                            <span :style="{ color: item.name === store.navData[0]?.name ? '#4BA6DD' : '' }">{{ item.name }}</span>
                        </template>
                        <template v-for="subItem in item.child">
                            <el-sub-menu v-if="subItem.child.length !== 0" :index="subItem.id.toString()" @click.stop="goPath(subItem)">
                                <template #title>
                                    <i class="iconfont icon" :class="subItem.icon" v-if="subItem.icon" :style="{ color: subItem.id === selectMenus[1]?.id ? '#4BA6DD' : '' }"></i>
                                    <span :style="{ color: subItem.id === selectMenus[1]?.id ? '#4BA6DD' : '' }">{{ subItem.name }}</span>
                                </template>
                                <div v-for="subsubItem in subItem.child" :key="subsubItem.id" @click.stop="goPath(subsubItem)">
                                    <el-menu-item :index="subsubItem.id.toString()">
                                        <template #title>
                                            <span>{{ subsubItem.name }}</span>
                                        </template>
                                    </el-menu-item>
                                </div>
                            </el-sub-menu>
                            <div v-else @click.stop="goPath(subItem)">
                                <el-menu-item :keys="subItem.id" :index="subItem.id.toString()">
                                    <template #title>
                                        <div class="box"></div>
                                        <span>{{ subItem.name }}</span>
                                    </template>
                                </el-menu-item>
                            </div>
                        </template>
                    </el-sub-menu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.id" :keys="item.id" @click="goPath(item)">
                        <template #title>
                            <span>{{ item.name }}</span>
                        </template>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { mapUrlToItem } from "@/utils/mapMenus.js";
import { mainStore } from "@/store/main.js";

const store = mainStore();
const router = useRouter();
const route = useRoute();
const menusRef = ref(null);
const defaultActive = ref("");
let oldMenuIndex = 0;

watch(
    () => route.path,
    (newValue) => {
        store.setTheme(newValue);
        const item = mapUrlToItem(store.menu, newValue.split("/").slice(0, 3).join("/"));
        defaultActive.value = item?.id.toString();
        store.btns = item?.btns;
    },
    {
        immediate: true
    }
);
const goPath = (item) => {
    if (item.routePath) {
        router.push(item.routePath);
    }
};
const menuOpen = (index) => {
    if (oldMenuIndex == index || !store.menu.some((item) => item.id == index)) return;
    const menuItem = [store.menu.find((item) => item.id == oldMenuIndex)];
    _a(menuItem);
    oldMenuIndex = index;
    function _a(menuItem) {
        for (let i = 0; i < menuItem.length; i++) {
            if (!menuItem[i]) return;
            menusRef.value.close(menuItem[i].id.toString());
            if (!menuItem[i].child.length) return;
            _a(menuItem[i].child);
        }
    }
};
const goHome = () => {
    router.push("/main/home");
};
</script>

<style lang="less" scoped>
.nav-aside {
    position: relative;
    &::before {
        content: "";
        display: block;
        width: 200px;
        height: 56px;
    }
    .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 200px;
        height: 56px;
        z-index: 999;
        color: #fff;
        cursor: pointer;
    }
    .menus {
        --el-menu-bg-color: #1c3646;
        --el-menu-text-color: #fff;
        --el-menu-active-color: #fff;
        border-right: none;
        :deep(.el-menu-item) {
            background-color: #1c3646;
            &::after {
                content: "";
                position: absolute;
                width: 90%;
                height: 85%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                z-index: 1;
                background-color: #1c3646;
                border-radius: 5px;
                transition: all 0.5s;
            }
        }
        :deep(.el-menu-item span) {
            z-index: 2;
        }
        :deep(.el-menu-item:hover) {
            &::after {
                background-color: #4ba6dd;
            }
        }

        :deep(.el-menu-item.is-active) {
            z-index: 2;
            &::after {
                content: "";
                position: absolute;
                width: 90%;
                height: 85%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                z-index: 1;
                background-color: #4ba6dd;
                border-radius: 5px;
            }
        }
        :deep(.el-sub-menu__title:hover) {
            background-color: #1c3646;
        }

        .icon {
            margin-right: 4px;
            font-size: 18px;
        }
        .box {
            width: 10px;
        }
    }
}
</style>
